<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="order by dede58.com" />
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="./css/login.css">
		<script type="text/javascript" src="js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<style>
			.error {
				color: red;
			}
		</style>
	</head>

	<body>
		<form method="post" id="regist-form">
			<div class="regist">
				<div class="regist_center">
					<div class="regist_top">
						<div class="left fl">会员注册</div>
						<div class="right fr">
							<a href="./index.html" target="_self">老司机商城</a>
						</div>
						<div class="clear"></div>
						<div class="xian center"></div>
					</div>
					<div class="regist_main center">
						<div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang" type="text" name="name" placeholder="请输入你的用户名" /></div>
						<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="pwd" placeholder="请输入你的密码" /></div>
						<div class="username">确认密码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="pwdConfirm" placeholder="请确认你的密码" /></div>
						<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang" type="text" name="phone" placeholder="请填写正确的手机号" /></div>
						<div class="username">
							<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;
								<input class="yanzhengma" type="text" name="validateCode" placeholder="请输入验证码" />

							</div>
							<div class="right fl"><button type="button" name="submit" style="height: 40px;" id="sendValidateCode">发送验证码</button></div>
							<div class="clear"></div>
						</div>
					</div>
					<div class="regist_submit">
						<input class="submit" type="submit" name="submit" value="立即注册">
					</div>

				</div>
			</div>
		</form>
	</body>
	<script>
		//用户名不得重复的校验
		$.validator.addMethod("nameNotDupicate", function(value, element) {
			var isExist = false;
			$.ajax({
				url: serverPath + "user/checkNameDuplicate",
				data: {
					name: value
				},
				type: "post",
				async: false,
				success: function(res) {
					isExist = res.data;
				}
			});
			return !isExist;
		}, "用户名不得重复");
		//强密码类型
		$.validator.addMethod("strongPwd", function(value, element) {
			return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/.test(value);
		}, "密码必须是强密码类型");
		//手机号格式
		$.validator.addMethod("phone", function(value, element) {
			return /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value);
		}, "不是合法的手机号码");
		//手机号不能重复
		$.validator.addMethod("phoneNotDuplicate", function(value, element) {
			var isExist = false;
			$.ajax({
				url: serverPath + "user/checkPhoneDuplicate",
				data: {
					phone: value
				},
				type: "post",
				async: false,
				success: function(res) {
					isExist = res.data;
				}
			});
			return !isExist;
		}, "同一手机号不得重复注册");

		$("#regist-form").validate({
			rules: {
				name: {
					required: true,
					nameNotDupicate: true
				},
				pwd: {
					required: true,
					strongPwd: true
				},
				pwdConfirm: {
					required: true,
					equalTo: "input[name=pwd]"
				},
				phone: {
					required: true,
					phone: true,
					phoneNotDuplicate: true
				}
			},
			messages: {
				name: {
					required: "用户名不能为空"
				},
				pwd: {
					required: "密码不能为空"
				},
				pwdConfirm: {
					required: "密码不能为空",
					equalTo: "两次输入的密码需要保持一致"
				},
				phone: {
					required: "手机号不能为空"
				}
			},
			submitHandler: function(form) {
				$.ajax({
					url: serverPath + "user/regist",
					type: "post",
					data: $(form).serialize(),
					xhrFields: {
						withCredentials: true
					},
					success: function(res) {
						if(res.code == 200) {
							location.href = "login.html";
						}
					},
					error: function(res) {
						alert(JSON.parse(res.responseText).error);
					}
				});
				return false;
			}
		});

		//发送验证码
		$("#sendValidateCode").bind("click", function() {
			var phone = $("input[name=phone]").val();
			if($.trim(phone) == '') {
				alert("手机号不能为空");
				return;
			}
			$.ajax({
				url: serverPath + "user/sendValidateCode",
				method: "post",
				data: {
					phone: phone
				},
				xhrFields: {
					withCredentials: true
				},
				success: function(res) {
					if(res.code == 200) {
						alert("验证码已成功发送，请注意查收");
					}
				},
				error: function(res) {
					alert(JSON.parse(res.responseText).error);
				}
			});
		});
	</script>

</html>